<template>
  <div>
    <div v-for="(item, index) in sampleList" :key="index" class="page-container">
      <div class="title-box">
        <span>{{ item.title }}</span>
      </div>
      <div class="button-box">
        <div
          v-for="(cItem, cIndex) in item.buttonList"
          :key="cIndex"
          class="button-item"
          @click="onClick(cItem)">
          {{ cItem.name }}
        </div>
      </div>
    </div>
    <PageDialog :visible.sync="dialogVisible" :title="dialogTitle" size="large">
      <component :is="curComponent"></component>
      <template slot="footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
        <el-button type="primary" @click="dialogVisible = false">确定</el-button>
      </template>
    </PageDialog>
  </div>
</template>

<script>
import DynamicForm from '@/views/samples/comExample/dynamic-form/index.vue';
import SampleForm from '@/views/samples/comExample/sample-form/index.vue';
import NTable from '@/views/samples/comExample/n-table/index.vue';
import Layout from '@/views/samples/cssExample/layout/index.vue';
import WaterfallFlow from '@/views/samples/cssExample/waterfall-flow/index.vue';
import CeilingBar from '@/views/samples/cssExample/ceiling-bar/index.vue';
import Effect from '@/views/samples/cssExample/effect/index.vue';
import VirtualList from '@/views/samples/jsExample/virtual-list/index.vue';
import Echart from '@/views/samples/otherExample/echart/index.vue';

export default {
  components: {
    DynamicForm,
    SampleForm,
    NTable,
    Layout,
    WaterfallFlow,
    CeilingBar,
    Effect,
    VirtualList,
    Echart
  },
  data() {
    return {
      sampleList: [
        {
          title: '组件实例',
          buttonList: [
            { name: '动态增减表单项', component: 'DynamicForm' },
            { name: '表单项示例', component: 'SampleForm' },
            { name: 'el-table二次封装', component: 'NTable' }
          ]
        },
        {
          title: 'CSS实例',
          buttonList: [
            { name: '布局', component: 'Layout' },
            { name: '瀑布流', component: 'WaterfallFlow' },
            { name: '导航栏吸顶', component: 'CeilingBar' },
            { name: '效果', component: 'Effect' },
          ]
        },
        {
          title: 'JS实例',
          buttonList: [
            { name: '虚拟列表', component: 'VirtualList' },
          ]
        },
        {
          title: '其他实例',
          buttonList: [
            { name: 'Echart图表', component: 'Echart' },
          ]
        }
      ],
      curComponent: null,
      dialogVisible: false,
      dialogTitle: ''
    };
  },
  methods: {
    onClick(item) {
      const { component, name } = item;
      this.curComponent = component;
      this.dialogTitle = name;
      this.dialogVisible = true;
    }
  }
};
</script>

<style scoped lang="scss">
$main-color: #1f397f;

.title-box {
  font-size: 15px;
}
.button-box {
  display: flex;
  flex-wrap: wrap;
  padding-top: 10px;
  .button-item {
    font-size: 12px;
    font-weight: 500;
    border: 1px solid #dcdfe6;
    border-radius: 3px;
    cursor: pointer;
    padding: 7px 12px;
    border-radius: 3px;
    margin-right: 10px;
    margin-bottom: 10px;
  }
  .button-item:hover {
    color: $main-color;
    border-color: #c6e2ff;
    background-color: #ecf5ff;
    transform: scale(1.1);
    transition: 0.6s;
  }
}
</style>
